<template>
	<div class="page-container">
		<el-form
			class="el-form-modify two-col"
			ref="form"
			label-width="100px"
			:model="formData"
			:rules="rules"
		>
			<h3 class="form-group-title">基本信息</h3>
			<el-row>
				<el-form-item label="渠道商商标" prop="icon">
							<upload-image v-model="formData.icon" :uploadUrl="uploadChannelUrl"></upload-image>
						</el-form-item>
				</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="渠道商名称" prop="name">
						<el-input v-model="formData.name" />
					</el-form-item>
					<el-form-item label="所在地区" prop="area">
						<area-select :emitPath="true" v-model="formData.area" @labelChange="labelChange" style="width: 100%;"></area-select>
					</el-form-item>
					<el-form-item label="权益品牌" prop="brandId">
						<el-select v-model="formData.brandId" @change="brandChange">
							<el-option v-for="brand in brandList" :key="brand.id" :label="brand.name" :value="brand.id"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="销售来源" prop="salesSource">
						<el-input v-model="formData.salesSource" />
						<!-- <el-select v-model="formData.salesSource">
              <el-option
                v-for="source in saleSourceList"
                :key="source"
                :label="source"
                :value="source"
              ></el-option>
						</el-select>-->
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系电话" prop="phone">
						<el-input v-model="formData.phone" />
					</el-form-item>
					<el-form-item label="详细地址" prop="address">
						<el-input v-model="formData.address" />
					</el-form-item>
					<el-form-item label="权益产品" prop="productId">
						<el-select v-model="formData.productId">
							<el-option
								v-for="product in productList"
								:key="product.id"
								:label="product.name"
								:value="product.id"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<h3 class="form-group-title">对公账户</h3>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="银行名称">
						<el-input v-model="formData.publicAccount.bankName"></el-input>
					</el-form-item>
					<el-form-item label="户名">
						<el-input v-model="formData.publicAccount.accountName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="银行卡号">
						<el-input v-model="formData.publicAccount.cardNum"></el-input>
					</el-form-item>
					<el-form-item label="开户行">
						<el-input v-model="formData.publicAccount.branch"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<h3 class="form-group-title">税务信息</h3>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="公司名称">
						<el-input v-model="formData.tax.companyName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="识别码">
						<el-input v-model="formData.tax.identifyNum"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<div style="text-align: center;margin-top: 40px">
				<el-button type="primary" size="small" @click="save" :loading="saving">保存</el-button>
				<el-button size="small" @click="cancel">取消</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
import UploadImage from '@/components/UploadImage'
import {channelPathPrefix} from '@/settings';
import { SALE_SOURCE } from "@/utils/const";
import { productEnableByBrand } from "@/api/product";
import { enableBrands } from "@/api/brand";
import { channelAdd, channelEdit, channelDetail, uploadChannelUrl} from "@/api/channel";
import AreaSelect from "@/components/AreaSelect";
import {rules} from '@/utils/validate'

export default {
	name: "EquityForm",
	components: { AreaSelect, UploadImage },
	props: ["selectData"],
	data() {
		this.saleSourceList = Object.values(SALE_SOURCE);

		this.uploadChannelUrl = uploadChannelUrl;

		let formData = {
			name: "",
			area: [],
			icon: '',
			salesSource: "",
			productId: "",
			phone: "",
			address: "",
			brandId: "",
			regionName: '',
			publicAccount: {
				accountName: "",
				cardNum: "",
				bankName: "",
				branch: ""
			},
			tax: {
				companyName: "",
				identifyNum: ""
			}
		};
		// if (this.selectData) {
		// 	Object.assign(formData, this.selectData);
		// }

		return {
			pathPrefix: channelPathPrefix,
			productList: [],
			brandList: [],
			formData,
			rules: {
				name: [rules.required, rules.text2_32],
				phone: [rules.required, rules.phone],
				area: [rules.array_required],
				brandId: [rules.required],
				productId: [rules.required],
				address: [rules.required, rules.textMax_128],
			},
			saving: false
		};
	},
	methods: {
		labelChange(label) {
			this.formData.regionName = label;
		},
		brandChange(selectKey) {
			this.requestProduct(selectKey);
		},
		async requestBrand() {
			try {
				const { data } = await enableBrands();
				this.brandList = data;
			} catch (err) {
				console.log(err);
			}
		},
		async requestProduct(brandId) {
			try {
				const { data } = await productEnableByBrand(brandId);
				this.productList = data;
			} catch (err) {
				console.log(err);
			}
		},
		async requestDetail(id) {
			try {
				const { data } = await channelDetail(id);
				this.requestProduct(data.brandId)

        this.formData.id = data.id;
				this.formData.name = data.name;
				this.formData.icon = data.icon;
				this.formData.area = data.regionCode ? data.regionCode.split(',').map(item => item + '') : [];
				this.formData.regionName = data.regionName;
        this.formData.salesSource = data.saleSource;
        this.formData.productId = data.productId;
        this.formData.phone = data.phone;
        this.formData.address = data.address;
        this.formData.brandId = data.brandId;
        this.formData.publicAccount.accountName = data.accountName;
        this.formData.publicAccount.cardNum = data.cardNum;
        this.formData.publicAccount.bankName = data.bankName;
        this.formData.publicAccount.branch = data.branch;
        this.formData.tax.companyName = data.companyName;
        this.formData.tax.identifyNum = data.identifyNum;
			} catch (error) {
        console.log(error)
      }
		},
		save() {
			this.$refs.form.validate(async valid => {
				if (!valid) {
					return;
				}
				try {
					this.saving = true;
					let postData = { ...this.formData };
					postData.area = postData.area.join(",");
					const method = this.formData.id ? channelEdit : channelAdd;
					await method(postData);
					this.saving = false;
					this.$message.success('保存成功!');
					this.$emit("refresh");
					this.cancel();
				} catch (err) {
					this.saving = false;
					console.log(err);
				}
			});
		},
		cancel() {
			this.$router.go(-1);
		}
	},
	created() {
		if (this.$route.name == "editChannel") {
			const { id } = this.$route.params;
			if (id) {
				this.requestDetail(id);
			} else {
				ths.cancel();
				return;
			}
		}
		this.requestBrand();
	}
};
</script>

<style>
</style>